<template>
    <div class="addressmanagement" v-if="addresslist">
        <div class="add">
            <button @click="addAdress">新增收货地址</button>
            <span>（已添加{{addresslist.length}}条，最多可添加10条）</span>
        </div>
        <div class="address-list">
            <div class="thead">
                <span class="h-name">收货人</span>
                <span class="h-adress">收货地址</span>
                <span class="h-tel">联系电话</span>
                <span class="h-edit">操作</span>
            </div>
            <div class="item" v-for="(item,index) in addresslist" :key="index">
                <span class="name">{{item.consignee}}</span>
                <span class="adress">{{item.provinceName}}{{item.cityName}}{{item.countryName}}{{item.address}}</span>
                <span class="tel">{{item.mobile}}</span>
                <span class="edit">
                    <i @click="editoraddress(index)" class="change">修改</i>
                    <i class="del" @click="deladdress(index)">删除</i>
                    <i class="" v-if="item.isDefault != 1" @click="setdefault(index)">设为默认地址</i>
                    <i class="" v-if="item.isDefault == 1">默认地址</i>
                </span>
            </div>
        </div>
        <addressmodal :visible.sync="state" @determine="addsuccess"></addressmodal>
        <editadress :visible.sync="editState" @determine="editsuccess" :formData="formData"></editadress>
        <modal :visible.sync="delmodal" content="是否删除该收货地址？" @determine="delsuccess"></modal>
    </div>
</template>
<script>
import Addressmodal from "../components/adressmodal.vue";
import Editadress from "../components/editadress.vue";
import Modal from "../components/modal.vue";
import { addressOperation, addressSetDefault } from "../http/api";
export default {
    components: {
        Addressmodal,
        Editadress,
        Modal
    },
    data() {
        return {
            state: false,
            editState: false,
            delmodal: false,
            addresslist: null, //地址列表
            formData: null,
            adressid: null,
            addresswarn:false //新增地址超过十条提醒
        };
    },
    methods: {
        addAdress() {
            if(this.addresslist.length < 10){
                this.state = true;
            }else{
                this.$Message.info('已添加10条地址，请先删除原有地址！');
            }
        },
        editoraddress(index) {
            this.formData = this.addresslist[index];
            this.editState = true;
        },
        deladdress(index) {
            this.adressid = this.addresslist[index].deliveryId;
            this.delmodal = true;
        },
        setdefault(index) {
            addressSetDefault({
                deliveryId: this.addresslist[index].deliveryId
            }).then(response => {
                // console.log(response);
                if (response.data.status == 1000) {
                    this.api_addressOperation({ operationType: "query" });
                    this.$Message.success({
                        content: "设置成功!",
                        duration: 1.5
                    });
                }
            });
        },
        //添加地址成功回调
        addsuccess() {
            this.api_addressOperation({ operationType: "query" });
        },
        //修改地址成功回调
        editsuccess() {
            this.api_addressOperation({ operationType: "query" });
        },
        //删除地址成功回调
        delsuccess() {
            this.api_addressOperation({
                operationType: "delete",
                deliveryId: this.adressid
            });
        },
        //收获地址api
        api_addressOperation(params) {
            addressOperation(params).then(response => {
                if (params.operationType == "delete") {
                    addressOperation({ operationType: "query" }).then(res => {
                        this.addresslist = res.data.deliveryAddressList;
                    });
                } else {
                    this.addresslist = response.data.deliveryAddressList;
                }
            });
        }
    },
    created() {
        this.api_addressOperation({ operationType: "query" });
    }
};
</script>
<style lang="less">
@import "../assets/styles/addressmanagement.less";
</style>


